<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>体验websocket</title>
  <style>
    #contanier {
      width: 500px;
      height: 400px;
      border: 2px dashed #7575e7;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div id="contanier"></div>
  <!-- 1  建立连接 (拨号) -->
  <!-- 2  发消息 接消息 -->
  <!-- 3  关闭连接 -->
  <input type="text" id="message" />
  <button id="btn1">建立连接</button>
  <button id="btn2">发送消息</button>
  <button id="btn3">关闭连接</button>

  <script>
    var dom = document.getElementById('contanier')
    var inputDom = document.getElementById('message')
    var btn1 = document.getElementById('btn1')
    var btn2 = document.getElementById('btn2')
    var btn3 = document.getElementById('btn3')

    var isOpen = false // 表示是否已经建立了拨号
    var ws // 别的方法 也需要使用ws

    // 打开websocket连接
    btn1.onclick = function () {
      /// 网络上提供的一个测试websocket功能的服务器地址。
      /// 它的效果是，你向服务器发什么消息 ，它就完全回复还给你。
      ws = new WebSocket('ws://121.40.165.18:8800') // 建立与服务器的联系

      // onopen是webSocket约定事件名
      // 当本地客户端浏览器与服务器建立连接之后，就会执行onopen的回调
      ws.onopen = function (event) {
        isOpen = true
        // 建立成功
        dom.innerHTML = dom.innerHTML + `<p>与服务器成功建立连接</p>`
      }

      //   接收消息
      // onmessage是webSocket约定事件名
      // 如果从服务器上发过来了消息，则会进入onmessage的回调
      ws.onmessage = function (event) {
        // 由于 我们先给服务器发了消息 服务器给我们回了消息
        dom.innerHTML =
          dom.innerHTML + `<p style='color: blue'>服务器说:${event.data}</p>`
      }

      // onclose是webSocket约定事件名
      ws.onclose = function () {
        // 此函数表示 关闭连接成功
        isOpen = false // 把状态关闭掉
        dom.innerHTML = dom.innerHTML + `<p>与服务器连接关闭</p>`
      }
    }

    //   发送消息 接收消息
    btn2.onclick = function () {
      if (inputDom.value && isOpen) {
        // 发消息 要等到 连接成功才能发 而且内容不为空

        // 发消息就是send
        ws.send(inputDom.value) // 发送消息
        //   发完之后 添加到 当前视图上
        dom.innerHTML =
          dom.innerHTML + `<p style='color: red'>我说:${inputDom.value}</p>`
        inputDom.value = ''
      }
    }

    // 关闭连接
    btn3.onclick = function () {
      ws.close() // 关闭连接
    }
  </script>
</body>

</html>